// 营收管理页面
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { WhiteSpace, List } from 'antd-mobile-rn';
import DatePicker from '../components/DatePicker';
import BaseView from './BaseView';

import { getRevenueStatistics } from '../model/revenue';

export default class RevenueAdmin extends BaseView {
  constructor(props) {
    super(props);
    this.state = {
      ...this.BaseState,
      time: new Date('2018-02-12'),
      sr: 12322,
      dsy: 223,
      ytk: 431234,
      ysy: 2314,
      yhj: 23,
      sxf: 1234344,
      slkjs: 23,
      saa: '',
    };
  }

  async componentDidMount() {
    super.componentDidMount();
    this.props.navigation.setParams({
      title: '营收管理'
    });
    // 请求数据
    await getRevenueStatistics({
      passwordObject: {
        mobile: phone,
        password: psw,
        verificationCode: yzm
      }
    });
  }

  getTime(time) {
    const t = new Date(time);
    const y = t.getFullYear();
    const m = t.getMonth() + 1;
    const d = t.getDate();
    const h = t.getHours();
    const i = t.getMinutes();
    const s = t.getSeconds();
    // 可根据需要在这里定义时间格式
    return `${y}-${m < 10 ? `0${m}` : m}-${d < 10 ? `0${d}` : d} ${h < 10 ? `0${h}` : h}:${
      i < 10 ? `0${i}` : i
    }:${s < 10 ? `0${s}` : s}`;
  }

  onChange(date) {
    this.setState({
      star: date
    });
    // 拉取数据
  }

  onChange2(date) {
    this.setState({
      end: date
    });
    // 拉取数据
  }

  goback() {
    const { navigation } = this.props;
    const backAction = NavigationActions.back();
    navigation.dispatch(backAction);
  }

  renderPage() {
    const {
      star, end, sr, dsy, ysy, sxf
    } = this.state;
    return (
      <View style={revenueAdmin.row}>
        <WhiteSpace />
        <View style={revenueAdmin.inputWrap}>
          <List>
            <DatePicker
              style={revenueAdmin.date}
              extra="请输入统计开始日期"
              value={star}
              mode="date"
              onChange={(date) => {
                this.onChange(date);
              }}
              format="YYYY-MM-DD"
            >
              <List.Item arrow="horizontal">Select Date</List.Item>
            </DatePicker>
            <DatePicker
              style={revenueAdmin.date}
              extra="请输入统计结束日期"
              value={end}
              mode="date"
              onChange={(date) => {
                this.onChange2(date);
              }}
              format="YYYY-MM-DD"
            >
              <List.Item arrow="horizontal">Select Date</List.Item>
            </DatePicker>
          </List>
        </View>
        <WhiteSpace />
        <View style={revenueAdmin.listWrap}>
          <View style={revenueAdmin.listflex}>
            <View style={revenueAdmin.list}>
              <Text style={revenueAdmin.text}>
                {sr}
                <Text style={{ fontSize: 12 }}>元</Text>
              </Text>
              <Text style={revenueAdmin.text2}>收入</Text>
            </View>
            <View style={revenueAdmin.list}>
              <Text style={revenueAdmin.text}>
                {dsy}
                <Text style={{ fontSize: 12 }}>元</Text>
              </Text>
              <Text style={revenueAdmin.text2}>带使用</Text>
            </View>
            {/* <View style={revenueAdmin.list}>
              <Text style={revenueAdmin.text}>
                {ytk}
                <Text style={{ fontSize: 12 }}>元</Text>
              </Text>
              <Text style={revenueAdmin.text2}>已退款</Text>
            </View> */}
          </View>
        </View>
        <WhiteSpace />
        <View style={revenueAdmin.listWrap}>
          <View style={revenueAdmin.listflex}>
            <View style={revenueAdmin.list}>
              <Text style={revenueAdmin.text}>
                {ysy}
                <Text style={{ fontSize: 12 }}>元</Text>
              </Text>
              <Text style={revenueAdmin.text2}>已使用</Text>
            </View>
            {/* <View style={revenueAdmin.list}>
              <Text style={revenueAdmin.text}>
                {yhj}
                <Text style={{ fontSize: 12 }}>元</Text>
              </Text>
              <Text style={revenueAdmin.text2}>优惠卷</Text>
            </View> */}
            <View style={revenueAdmin.list}>
              <Text style={revenueAdmin.text}>
                {sxf}
                <Text style={{ fontSize: 12 }}>元</Text>
              </Text>
              <Text style={revenueAdmin.text2}>手续费</Text>
            </View>
          </View>
        </View>
        <WhiteSpace />
      </View>
    );
  }
}

const revenueAdmin = StyleSheet.create({
  row: {
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#fff'
  },
  listWrap: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center'
  },
  listflex: {
    width: 300,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    backgroundColor: '#fff'
  },
  list: {
    width: 90,
    height: 80,
    backgroundColor: '#478ac8',
    borderRadius: 8,
    alignItems: 'center',
    justifyContent: 'space-around'
  },
  text: {
    color: '#fff',
    fontSize: 18
  },
  text2: {
    color: '#fff',
    fontSize: 14
  }
});
